<template>
  <!-- 智能主煤流 -->
  <div class="coalFlow">
    <layout-box :is-leave="isLeave">
      <!-- 页面左侧 -->
      <div slot="left" class="left">
        <left />
      </div>
      <!-- 页面右侧 -->
      <div slot="right" class="right">
        <right />
      </div>
    </layout-box>
  </div>
</template>

<script>
// 左右分栏布局
import LayoutBox from '@/components/LayoutBox.vue';
// 引入左右两栏模块
import left from './left.vue';
import right from './right.vue';
export default {
  components: {
    LayoutBox,
    left,
    right
  },
  data() {
    return {
      isLeave: false,
      time: null
    };
  },
  // 页面的退场动画
  beforeRouteLeave(to, from, next) {
    this.isLeave = true;
    this.time = setTimeout(() => {
      next();
    }, 1000);
  },
  beforeDestroy() {
    clearTimeout(this.time);
    this.time = null;
  }
};
</script>

<style lang='scss' scoped>
.left{
  overflow: hidden;
  height: 61.25rem;
}
.right{
  height: 61.25rem;
  overflow: hidden;
}
</style>

